<% include ./side.html %>
<link href="//cdn.bootcss.com/switchery/0.8.2/switchery.min.css" rel="stylesheet">
<style scoped>
	.setting-body {
	margin: 15px;
	background: #fff;
	padding: 20px; }
	.setting-body .block {
		overflow: hidden; 
	}
	.setting-body .block .h1 {
		font-size: 16px;
		font-weight: 300;
		line-height: 35px;
		border-bottom: solid 1px #eee;
		padding-bottom: 8px; 
	}
	.setting-body .block .content {
		margin: 15px 0 20px 50px; 
	}
	.setting-body .block .content .script-text {
		max-width: 1200px;
		background: #f4f4f4;
		color: #333;
		font-size: 14px;
		border: none;
		padding: 10px; 
	}
	.setting-body .block .code code {
		padding: 4px 8px;
		background: #000;
		color: #fff;
		font-size: 12px;
		border-radius: 5px;
		margin: 0 3px; 
	}
	.setting-body .block-center {
		width: 500px;
		margin-left: 150px; 
	}
	.setting-body .block-two {
		overflow: hidden; 
	}
	.setting-body .block-two .block-center {
		width: 500px; 
	}
	.setting-body .block-two .onepart {
		width: 40%;
		float: left;
		margin-right: 10%; 
	}
	.setting-body .button {
		width: 200px;
		height: 45px;
		background: #2077ff;
		color: #fff;
		border: none;
		font-size: 16px;
		border-radius: 3px;
		cursor: pointer;
		margin-left: 155px; 
	}
	.setting-body .item {
		margin-bottom: 20px;
		font-size: 14px; 
	}
	.setting-body .item .left {
		display: inline-block;
		width: 150px;
		text-align: right; 
	}
	.setting-body .item input {
		height: 40px;
		background: #f4f4f4;
		border: none;
		width: 300px;
		padding-left: 10px; 
	}
	.setting-body p{
		font-size:14px;
		color:#999;
		line-height:30px;
	}
	.btns .btn-main{
		border-radius:20px;
	}
	.margin_left{
		max-width:1200px;
		margin-left:80px;
	}
	@media (max-width: 768px) {
		.setting-body .block .content {
			margin: 15px 0 20px 5px;
		}
		.content .btn{
			margin-bottom:5px;
		}
		.com_slide_tab_x .item{
			padding:0;
			margin-right:20px;
		}
		.setting-body .block-center{
			margin-left:0;
		}
		.setting-body{
			margin: 10px;
    		padding: 10px;
		}
		.setting-body .item{
			font-size:12px;
		}
		.setting-body .item .left{
			width:120px;
		}
		.setting-body .block-two .onepart {
			width: 100%;
		}
		.margin_left{
			margin-left:0;
		}
	}
</style>
<div class="com_content_body main pb100" id="vue_id" v-cloak>
	<h1 class="com_h1">应用告警</h1>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">告警列表</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">告警规则</div>
		<div class="item" :class="{'active':lable==3}" @click="checkoutLabel(3)">告警条件</div>

	</div>
	<div class="setting-body">
		<div class="block" v-show="lable==1">
			<div class="tc">开发中...</div>				
		</div>
		<div class="block" v-show="lable==2">
			<div class="tc">开发中...</div>
		</div>
		<div class="block block-two" v-show="lable==3">
			<div class="tc">开发中...</div>
		</div>
	</div>
</div>
x<script src="//cdn.bootcss.com/switchery/0.8.2/switchery.min.js"></script>
<script>
new Vue({
	el: '#vue_id',
	data: function () {
		return {
			lable:1, //1:概况 2：pv|uv|ip
			appId: util.getStorage('local', 'appId'),
		}
	},
	mounted() {
	},
	methods: {
		checkoutLabel(lable) {
			this.lable = lable;
		},
	},
})
</script>